<template>
    <view class="shade" v-show="showShade" @tap="hidePop">
        <view class="pop" :style="popStyle" :class="{'show':showPop}">
            <view v-for="(item,index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">{{item}}</view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        /* 显示遮罩 */
        showShade: {
            type: Boolean,
            default: false
        },
        /* 显示操作弹窗 */
        showPop: {
            type: Boolean,
            default: false
        },
        /* 弹窗定位样式 */
        popStyle: {
            type: String,
            default: ''
        },
        /* 弹窗按钮列表 */
        popButton: {
            type: Array,
            default:function() {
                return ["标为关注", "置顶聊天", "删除该聊天"]
            }
        },
        /* 选择的用户下标 */
        pickerUserIndex: {
            type: Number,
            default: -1
        }
    },
    data() {
        return {

        }
    },
    methods: {
        /* 隐藏弹窗 */
        hidePop() {
            // this.showPop = false;
            this.$emit('changePop', false);
            // this.pickerUserIndex = -1;
            this.$emit('changePickIndex', -1);
            setTimeout(() => {
                // this.showShade = false;
                this.$emit('changeshade', false);
            }, 250);
        },
        /* 选择菜单 */
        pickerMenu(e) {
            console.log(e);
            
            let index = Number(e.currentTarget.dataset.index);
            console.log(`第${this.pickerUserIndex}个用户,第${index}个按钮`);
            // 在这里开启你的代码秀

            // uni.showToast({
            //     title: `第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`,
            //     icon: "none",
            //     mask: true,
            //     duration: 600
            // });

            this.$emit('selected', [this.pickerUserIndex, index]);

            /* 
                因为隐藏弹窗方法中会将当前选择的用户下标还原为-1,
                如果行的菜单方法存在异步情况，请在隐藏之前将该值保存，或通过参数传入异步函数中
                */
            this.hidePop();
        }
    }
    
}
</script>

<style scoped lang="scss">
/* 遮罩 */
	.shade {
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;

		.pop {
			position: fixed;
			z-index: 101;
			width: 200upx;
			box-sizing: border-box;
			font-size: 28upx;
			text-align: left;
			color: #333;
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
			line-height: 80upx;
			transition: transform 0.15s ease-in-out 0s;
			user-select: none;
			-webkit-touch-callout: none;
			transform: scale(0, 0);

			&.show {
				transform: scale(1, 1);
			}

			&>view {
				padding: 0 20upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				user-select: none;
				-webkit-touch-callout: none;

				&:active {
					background-color: #f3f3f3;
				}
			}
		}
	}
</style>